<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智慧社区后台-党员任岗</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-switch/css/bootstrap-switch.min.css">
<link href="${pageContext.request.contextPath}/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
</head>
<style>
</style>
<body style="padding-bottom: 90px; background-color: #ECF0F5;">
	<section class="content" style="margin: 15px; background-color: white;">
		<div class="row">
			<div class="col-sm-12">
				<table id="table">
					<thead style="background-color: #00C0EF">
						<tr style="background-color: #00C0EF">
							<th class="text-center" data-field=""></th>
							<th class="text-center" data-field="jobsName">岗位名称</th>
							<th class="text-center" data-field="jobsDuty">岗位职责</th>
							<th class="text-center" data-field="jobsProple">操作员</th>
							<th class="text-center" data-field="jobsState">状态</th>
							<th class="text-center" data-field="jobsId">操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</section>
	<!-- Large modal -->
	<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">党员任岗</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="jobs_name" class="control-label">岗位名称:</label> <input type="text" class="form-control" id="jobs_name">
					</div>
					<div class="form-group">
						<label for="jobs_prople" class="control-label">操作员:</label> <input type="text" class="form-control" value="" id="jobs_prople" disabled="disabled">
					</div>
					<div class="form-group">
						<label for="jobs_duty" class="control-label">岗位职责：</label>
						<!-- 						<textarea maxlength="50" name="memo" rows="5" cols="10" class="form-control" id="jobs_duty"> -->
						<!-- 						</textarea> -->
						<div>
							<textarea class="form-control" cols="10" rows="5" id="jobs_duty" name="jobs_duty" maxlength="50" onkeyup="this.value=this.value.substring(0, 50)"></textarea>
							<span id="text-count">0</span>/50
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="closeBtn" type="button" class="btn btn-primary" onclick="submitJobs();">提交</button>
				</div>
			</div>
		</div>
	</div>
	<div id="enrollModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">人员数据</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-12">
							<div id="rgTable">
								<table class="table table-condensed">
									<thead style="background-color: #00C0EF">
										<tr style="background-color: #00C0EF">
											<th class="text-center" data-field="applyName">姓名</th>
											<th class="text-center" data-field="applyTel">联系方式</th>
											<th class="text-center" data-field="applyTime">申请时间</th>
											<th class="text-center">操作</th>
										</tr>
									</thead>
									<tbody id="enrollTable">

									</tbody>
								</table>
							</div>
							<select id="userJob" class="selectpicker form-control" multiple data-live-search="true" data-live-search-placeholder="搜索" data-max-options="1">
							</select>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button id="submitBtn" type="button" class="btn btn-primary" onclick="submit();">保存</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<div id="applyModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">任岗人员</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="jobs_name" class="control-label">姓名:</label> <input type="text" class="form-control" id="apply_name" disabled="disabled">
					</div>
					<div class="form-group">
						<label for="apply_tel" class="control-label">联系方式:</label> <input type="text" class="form-control" id="apply_tel" disabled="disabled">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="${pageContext.request.contextPath}/js/ajaxfileupload.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script src="${pageContext.request.contextPath}/plugins/laydate/laydate.js"></script>
<script>
	var flag = false;
	var jobsId = "";
	laydate.render({
		elem : '#activity_end_time' //指定元素

	});
	$(function() {
		$('#jobs_duty').keyup(function() {
			var len = this.value.length
			$('#text-count').text(len);
		})
	});

	function actionFormatter(value, row, index) {
		if (row.jobsState == 0) {
			return [ "<button class='btn btn-success btn-xs glyphicon glyphicon-user' onclick='showEnroll(\"" + row.jobsId + "\",\"" + 1 + "\");'>查看申请</button>",
					"&nbsp;<button class='btn btn-info btn-xs glyphicon glyphicon-user' onclick='showEnroll(\"" + row.jobsId + "\",\"" + 2 + "\");'>任岗</button>",
					"&nbsp;<button class='btn btn-primary btn-xs glyphicon glyphicon-pencil' onclick='showModal(\"" + row.jobsId + "\");'>编辑信息</button>", ].join('');
		} else if (row.jobsState == 1) {
			return [ "<button class='btn btn-success btn-xs glyphicon glyphicon-user' onclick='showApply(\"" + row.jobsId + "\");'>任岗人员</button>",
					"&nbsp;<button class='btn btn-info btn-xs glyphicon glyphicon-user' disabled='disabled' onclick='showEnroll(\"" + '' + "\",\"" + '' + "\");'>任岗</button>",
					"&nbsp;<button class='btn btn-primary btn-xs glyphicon glyphicon-pencil' onclick='showInfo(\"" + row.jobsId + "\");'>查看信息</button>", ].join('');
		}
	}

	function StateFormatter(value, row, index) {
		//console.log();
		if (row.jobsState == 0) {
			return [ "<div class='text-danger'>待任岗</div>", ].join('');
		} else {
			return [ "<div class='text-success'>已任岗</div>", ].join('');
		}

	}

	var table_dataset = [ {
		field : 'id',
		checkbox : true,
	}, {
		field : 'jobsName',
		align : 'center',
	}, {
		field : 'jobsDuty',
		align : 'center',
	}, {
		field : 'jobsProple',
		align : 'center',
	}, {
		field : 'jobsState',
		align : 'center',
		formatter : StateFormatter
	}, {
		align : 'center',
		width : 300,
		formatter : actionFormatter,
	} ];
	$('#table')
			.bootstrapTable(
					{
						url : "${pageContext.request.contextPath}/jobs/selectJobsPage",
						idField : "jobsId",
						columns : table_dataset,
						striped : true, //是否显示行间隔色
						pagination : true, //是否显示分页
						pageSize : 10, //每页的记录行数
						pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数
						search : false, //是否显示搜索
						showRefresh : true,
						sidePagination : "server", //表示服务端请求  
						queryParamsType : "limit",
						queryParams : function queryParams(params) { //设置查询参数  
							var param = {
								offset : params.offset,
								limit : params.limit,
								kod : $("#kod").val(),
								kodType : $("#kodType").val()
							};
							return param;
						},
						toolbar : "<button style='float:left;' class='btn btn-primary glyphicon glyphicon-plus' onclick='showModal(\""
								+ ''
								+ "\");'>新增岗位</button>"
								+ "<div  style='width:250px;float:left;margin-top:2px;margin-left:20px;'>"
								+ "<select id='kodType' name='stateType' class='form-control' onchange='Querry()'>"
								+ "<option value=''>全部</option>"
								+ "<option value=0>待任岗</option>"
								+ "<option value=1>已任岗</option>"
								+ "</select></div>"
								+ "<div class='input-group' style='width:250px;float:right;margin-top:2px;margin-left:20px;'><input type='text' class='form-control' placeholder='请输入岗位名称' id='kod' name='kod'>"
								+ "<span class='input-group-btn'><button class='btn btn-default' type='button' onclick='Querry(\"" + '' + "\");'>查询</button></span></div>",
						icons : {
							paginationSwitchDown : 'glyphicon-collapse-down icon-chevron-down',
							paginationSwitchUp : 'glyphicon-collapse-up icon-chevron-up',
							refresh : 'glyphicon-refresh icon-refresh',
							toggle : 'glyphicon-list-alt icon-list-alt',
							columns : 'glyphicon-th icon-th',
							detailOpen : 'glyphicon-plus icon-plus',
							detailClose : 'glyphicon-minus icon-minus',
							"export" : 'glyphicon-export icon-share'
						},
						showExport : true,
						exportDataType : 'basic',
						exportTypes : [ 'json', 'xml', 'csv', 'txt', 'sql', 'excel' ]
					});

	function showModal(id) {
		enableChiose(false);
		if (id == "") {
			jobsId = '';
			$("#jobs_name").val('');
			$("#jobs_duty").val('');
			$("#text-count").text('0');
			$('#jobs_prople').val("${sessionScope.userAccount}");
			$('#modal').modal({
				backdrop : 'static',
				keyboard : false
			});
		} else {
			jobsId = id;
			$.ajax({
				url : "${pageContext.request.contextPath}/jobs/selectJobsById",
				type : "get",
				data : {
					jobsId : jobsId
				},
				dataType : "json",
				success : function(data) {
					var jobs = data.result;
					$("#jobs_name").val(jobs.jobsName);
					$("#jobs_duty").val(jobs.jobsDuty);
					$("#text-count").text(jobs.jobsDuty.length);
					// 					$('#jobs_prople').val(jobs.jobsProple);
					$('#jobs_prople').val("${sessionScope.userAccount}");
					$('#modal').modal({
						backdrop : 'static',
						keyboard : false
					});
				},
				error : function() {
					layer.msg('系统异常!', {
						icon : 2,
						time : 800
					});
				}
			});
		}
	}
	//查看信息
	function showInfo(id) {
		jobsId = id;
		$.ajax({
			url : "${pageContext.request.contextPath}/jobs/selectJobsById",
			type : "get",
			data : {
				jobsId : jobsId
			},
			dataType : "json",
			success : function(data) {
				var jobs = data.result;
				$("#jobs_name").val(jobs.jobsName);
				$("#jobs_duty").val(jobs.jobsDuty);
				$("#text-count").text(jobs.jobsDuty.length);
				$('#jobs_prople').val(jobs.jobsProple);
				enableChiose(true);
				$('#modal').modal({
					backdrop : 'static',
					keyboard : false
				});
			},
			error : function() {
				layer.msg('系统异常!', {
					icon : 2,
					time : 800
				});
			}
		});
	}

	//显示申请
	function showEnroll(id, state) {
		jobsId = id;
		$("#rgTable").hide();
		$("#submitBtn").hide();
		$('.selectpicker').selectpicker('hide');
		if (state == "1") {
			$("#rgTable").show();
			$.ajax({
				url : "${pageContext.request.contextPath}/jobs/selectJobsApply",
				type : "get",
				data : {
					jobsId : jobsId
				},
				dataType : "json",
				success : function(data) {
					var list = data.result;
					//console.log(list);
					var html = "";
					if (list.length == 0) {
						html = "<tr><td colspan='3' class='text-center'>暂无人申请</td></tr>"
					}
					for (var i = 0; i < list.length; i++) {
						html += "<tr><td class='text-center'>" + list[i].applyName + "</td><td class='text-center'>" + list[i].applyTel + "</td><td class='text-center'>" + list[i].applyTime + "</td>"
								+ "</td><td class='text-center'><button class='btn btn-success btn-xs glyphicon glyphicon-ok' onclick='pass(\"" + list[i].aId + "\",\"" + list[i].jobsId + "\",\""
								+ list[i].userId + "\");'>通过</button></td></tr>";

					}
					$("#enrollTable").html(html);
					$('#enrollModal').modal({
						backdrop : 'static',
						keyboard : false
					});
				},
				error : function() {
					layer.msg('系统异常!', {
						icon : 2,
						time : 800
					});
				}
			});
		} else {
			$.ajax({
				url : "${pageContext.request.contextPath}/selectAllAppUser",
				type : "get",
				dataType : "json",
				success : function(data) {
					var list = data.list;
					//console.log(list);
					var user = "";
					for (var i = 0; i < list.length; i++) {
						user += "<option value='"+list[i].userId+","+list[i].userName+","+list[i].userMobile+","+list[i].userIdCard+"'>" + list[i].userName + "</option>";
					}
					$("#userJob").html(user);
					$('.selectpicker').selectpicker('refresh');

				},
				error : function() {
				}
			});
			$("#submitBtn").show();
			$('.selectpicker').selectpicker('refresh');
			$('.selectpicker').selectpicker('show');
			$('#enrollModal').modal({
				backdrop : 'static',
				keyboard : false
			});
		}

	}
	//直接任岗
	function submit() {
		var userJob = $("#userJob").val().join();
		//console.log(userJob);
		if (userJob == null) {
			layer.msg('请选择人员！', {
				icon : 2,
				time : 800
			});
			return;
		}
		//debugger;
		$.ajax({
			url : "${pageContext.request.contextPath}/jobs/directlyPassJob",
			type : "post",
			data : {
				userJob : userJob,
				jobsId : jobsId
			},
			dataType : "json",
			success : function(data) {
				var result = data['result'];
				//console.log(result);
				if (result === 1) {
					layer.msg('操作成功!', {
						icon : 1,
						time : 800
					});
					setTimeout(function() {
						$("#table").bootstrapTable('refresh');
						$("#enrollModal").modal("hide");
					}, 1000);
				} else {
					layer.msg('操作失败!', {
						icon : 2,
						time : 800
					});
				}
			},
			error : function() {
				layer.msg('系统异常!', {
					icon : 2,
					time : 800
				});
			}
		});

	}

	//任岗人员
	function showApply(id) {
		$("#apply_name").val('');
		$("#apply_tel").val('');

		$.ajax({
			url : "${pageContext.request.contextPath}/jobs/selectJobsApplyByJobsId",
			type : "get",
			data : {
				jobsId : id
			},
			dataType : "json",
			success : function(data) {
				var jobsApply = data.result;
				$("#apply_name").val(jobsApply.applyName);
				$("#apply_tel").val(jobsApply.applyTel);
				$('#applyModal').modal({
					backdrop : 'static',
					keyboard : false
				});
			},
			error : function() {
				layer.msg('系统异常!', {
					icon : 2,
					time : 800
				});
			}
		});
	}
	//通过审核
	function pass(aId, jobsId, userId) {
		//console.log(aId, jobsId, userId);
		$.ajax({
			url : "${pageContext.request.contextPath}/jobs/passJobsApply",
			type : "post",
			data : {
				aId : aId,
				jobsId : jobsId,
				userId : userId

			},
			dataType : "json",
			success : function(data) {
				var result = data['result'];
				if (result === 1) {
					layer.msg('操作成功!', {
						icon : 1,
						time : 800
					});
					setTimeout(function() {
						$("#table").bootstrapTable('refresh');
						$("#enrollModal").modal("hide");
					}, 1000);
				} else {
					layer.msg('操作失败!', {
						icon : 2,
						time : 800
					});
				}
			},
			error : function() {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
			}
		});
	}

	//保存
	function submitJobs() {
		$("#closeBtn").button('loading');
		var jobsName = $('#jobs_name').val();
		var jobsProple = $('#jobs_prople').val();
		var jobsDuty = $('#jobs_duty').val();
		var url = jobsId === '' ? '${pageContext.request.contextPath}/jobs/insertJobs' : '${pageContext.request.contextPath}/jobs/updateJobs';

		$.ajax({
			url : url,
			type : "post",
			data : {
				jobsId : jobsId,
				jobsName : jobsName,
				jobsProple : jobsProple,
				jobsDuty : jobsDuty
			},
			dataType : "json",
			success : function(data) {
				var result = data['result'];
				if (result === 1) {
					layer.msg('操作成功!', {
						icon : 1,
						time : 800
					});
					setTimeout(function() {
						$("#table").bootstrapTable('refresh');
						$("#modal").modal("hide");
					}, 1000);
				} else {
					layer.msg('操作失败!', {
						icon : 2,
						time : 800
					});
				}
				$("#closeBtn").button('reset');
			},
			error : function() {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
				$("#closeBtn").button('reset');
			}
		});

		return false;
	}

	function enableChiose(type) {
		$("#jobs_name").attr("disabled", type);
		$("#jobs_duty").attr("disabled", type);
		if (type) {
			$("#closeBtn").hide();
		} else {
			$("#closeBtn").show();
		}
	}

	function Querry() {
		$("#table").bootstrapTable('refresh');
	}
</script>
</html>
